<template>
  <div :class="{qb:true}">
    <div>欢迎光临_vue开发的收银系统_水果店</div>
    <div :class="{zt:true}">
        <div :class="{xh:true}">苹果10￥/斤，折扣$&lt;8折&gt;</div>
        <div :class="{xh:true}">请输入你要购买的斤数<input type="number" v-model="shue"></div>
        <div :class="{xh:true}"><button @click="fn">结账买单~</button></div>
        <div :class="{xh:true}" v-if="flage">总价:0￥元 折后:0￥元 省了:0￥元</div>
        <div :class="{xh:true}" v-show='!flage'>总价:{{zongshu}}￥元 折后:{{zhehou}}￥元 省了:{{sheng}}￥元</div>


    </div>
    
  </div>
</template>

<script>
export default {
  data(){
    return {
       shue:0,
       flage:true,
       zhehou:null,
       sheng:null,
       zongshu:null
    }
  },
  methods:{
    fn(){
   this.flage=false
   this.zongshu=this.shue*10
   this.zhehou=this.shue*10*0.8
   this.sheng=this.shue*10*0.2

    }
  }
}
</script>

<style scoped>
.qb{
    width: 800px;
font-size: 16px;
color: #2b1015;
margin: 0 auto;
text-align: center;

}
.zt{
    width: 100%;
    border: 1px solid #414141
}
.xh{
    line-height: 30px;
    width: 100%;
    height: 30px;
    margin: 2px,5px;
    border: 1px solid #d4d4d4;

}
</style>